<template>
  <div id="talent_01">
    <p class="data_time">
      <span>数据更新时间：</span>
      <span style="color:#888">{{ timestamp(time, "Y-M-D h:m") }}</span>
    </p>
    <category_industry v-model="industryItemObj" :class="'mt_30'"/>
    <category_goods v-model="checkedDatasJoe" />
    <section class="type">
      <time_options v-model="value03" :radio_values="['日榜', '周榜', '月榜']" :timing="$global.timing" />
      <section class="input_group">
        <input
          type="text"
          v-model="input01"
          placeholder="请输入关键词在排行榜中搜索"
          @keyup.enter="search_input()"
        />
        <div @click="search_input()">
          <!-- <img src="../../../assets/meng/search01.png" /> -->
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <span></span>分享
        </button>
        <button @click="export_data">
          <span></span>导出
        </button>
      </div>
    </section>

    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li tc>排名</li>
      <li>达人</li>
      <li
        tc
        @click="sort_fun(false, 2)"
        style="  cursor: pointer;"
        v-if="
          order_by == 'desc' &&
            sort != '2' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        预估销量
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '2' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        预估销量
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <!--预留  -->
      <li
        tc
        v-if="
          this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value03.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >预估销量</li>
      <!-- -->

      <li
        tc
        style="  cursor: pointer;"
        @click="sort_fun(false, 1)"
        v-if="
          order_by == 'desc' &&
            sort != '1' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        预估销售额
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '1' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        预估销售额
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!--预留  -->
      <li
        tc
        v-if="
          this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value03.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >预估销售额</li>
      <!--  -->
      <li
        tc
        @click="sort_fun(false, 3)"
        style="  cursor: pointer;"
        v-if="
          order_by == 'desc' &&
            sort != '3' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        场均观看人数
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '3' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        场均观看人数
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!--预留  -->
      <li
        tc
        v-if="
          this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value03.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >场均观看人数</li>
      <!--  -->
      <li
        tc
        @click="sort_fun(false, 4)"
        style="  cursor: pointer;"
        v-if="
          order_by == 'desc' &&
            sort != '4' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        观看人数峰值
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '4' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        观看人数峰值
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!--预留  -->
      <li
        tc
        v-if="
          this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value03.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >观看人数峰值</li>
      <!--  -->
      <li tc>带货品类TOP3</li>
      <li
        tc
        @click="sort_fun(false, 5)"
        style="  cursor: pointer;"
        v-if="
          order_by == 'desc' &&
            sort != '5' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        直播场次
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '5'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '5' &&
            this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value03.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        直播场次
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '5'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!--预留  -->
      <li
        tc
        v-if="
          this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value03.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >直播场次</li>
      <!--  -->
    </ul>
    <table class="table table01" ref="capture">
      <thead>
        <tr>
          <th>排名</th>
          <th>达人</th>
          <th
            @click="sort_fun(false, 2)"
            style="  cursor: pointer;"
            v-if="
              order_by == 'desc' &&
                sort != '2' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            预估销量
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!--预留  -->
          <th
            v-if="
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value03.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >预估销量</th>
          <!-- -->
          <th
            v-if="
              order_by == 'desc' &&
                sort == '2' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            预估销量
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>

          <th
            style="  cursor: pointer;"
            @click="sort_fun(false, 1)"
            v-if="
              order_by == 'desc' &&
                sort != '1' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            预估销售额
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '1' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            预估销售额
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!--预留  -->
          <th
            v-if="
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value03.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >预估销售额</th>
          <!--  -->
          <th
            @click="sort_fun(false, 3)"
            style="  cursor: pointer;"
            v-if="
              order_by == 'desc' &&
                sort != '3' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            场均观看人数
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '3' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            场均观看人数
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!--预留  -->
          <th
            v-if="
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value03.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >场均观看人数</th>
          <!--  -->

          <th
            @click="sort_fun(false, 4)"
            style="  cursor: pointer;"
            v-if="
              order_by == 'desc' &&
                sort != '4' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            观看人数峰值
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '4' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            观看人数峰值
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!--预留  -->
          <th
            v-if="
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value03.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >观看人数峰值</th>
          <!--  -->

          <th>带货品类TOP3</th>

          <th
            @click="sort_fun(false, 5)"
            style="  cursor: pointer;"
            v-if="
              order_by == 'desc' &&
                sort != '5' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            直播场次
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '5'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '5' &&
                this.value03.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value03.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            直播场次
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '5'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!--预留  -->
          <th
            v-if="
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value03.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >直播场次</th>
          <!--  -->
        </tr>
      </thead>
      <tbody v-if="table_data01.length != 0 && !loading">
        <tr v-for="(item, index) in table_data01" :key="'table' + index" :id="!index ? 'tr1' : ''">
          <td class="td td_01">{{ item.rank }}</td>
          <td class="td td_02">
            <div style="justify-content: flex-start;">
              <img
                :src="item.logo"
                class="pointer"
                @click="go_to_page01(item.authorId)"
                v-errorImg:talent
              />
              <section>
                <div>
                  <img
                    v-if="item.isShop == 1"
                    class="img01"
                    src="../../../assets/meng/search_result01.png"
                  />
                  <span class="dot pointer" @click="go_to_page01(item.authorId)">{{ item.nickName }}</span>
                  <img v-if="item.verifyType == 1" src="../../../assets/meng/search_result02.png" />
                  <img v-if="item.VerifyType == 2" src="../../../assets/meng/search_result03.png" />
                </div>
                <div>粉丝数：{{ format_num(item.totalFans) }}</div>
              </section>
            </div>
          </td>
          <td class="td td_03">
            <div>{{ format_num(item.forecastVolume) }}</div>
          </td>
          <td class="td td_04">
            <div>{{ format_num(item.forecastSaleroom) }}</div>
          </td>
          <td class="td td_05">
            <div>{{ format_num(item.watchCountAvg) }}</div>
          </td>
          <td class="td td_06">
            <div>{{ format_num(item.peoplePeak) }}</div>
          </td>
          <td class="td td_07" v-if="item.proCategories != ''">
            <div :class="{ div_dot: screenshot }">{{ item.proCategories }}</div>
          </td>

          <td class="td td_07" v-if="item.proCategories == ''">
            <div :class="{ div_dot: screenshot }">--</div>
          </td>
          <td class="td td_08">
            <div>
              <span class="span01">{{ format_num(item.liveCount) }}</span>
              <span class="span03">|</span>
              <span
                class="span02"
                @click="
                  author_id = item.authorId;
                  page02 = 1;
                  get_data01();
                "
              >查看</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="upgradeBox" v-if="!permissions">
      <RankUpgrade class="rankUpgrade" />
    </div>
    <!-- 免费版只能查看10条数据 -->
    <!-- <div class="upgradeBox" v-if="permissions&& !loading&& vipLevel==0">
      <RankUpgrade class="rankUpgrade" />
    </div> -->
    <div class="empty" v-show="!loading && table_data01.length == 0 && permissions">
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
    <div class="pageBox" v-if="!loading">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="count"
        :page-size="30"
        :current-page="page"
        @current-change="get_data"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>

    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <!-- <p
      class="nothing"
      v-show="
        table_data01.length < 30 &&
          !loading &&
          permissions &&
          table_data01.length != 0
      "
    >我是有底线的～</p> -->

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialog" width="790px" top="6%" class="dialog">
      <div
        v-loading="loading01"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <section class="header">
          <div>
            <img
              :src="response && response.logo"
              @click="go_to_page01(response.authorId)"
              style="cursor: pointer;"
            />
          </div>
          <div>
            <p class="dot" @click="go_to_page01(response.authorId)" style="cursor: pointer;">
              {{ response && response.nickName }}
              <img
                v-if="false"
                src="@/assets/meng/search_result02.png"
              />
              <img v-if="false" src="@/assets/meng/search_result03.png" />
            </p>
            <!-- <p class="dot">简介：请认准官方认证号，其他的都是骗子v其他的都是骗子</p> -->
          </div>
        </section>
        <p class="count">
          共
          <span>{{ response && response.totalCount }}</span> 场直播
        </p>
        <table class="table table02">
          <thead>
            <tr>
              <th>直播间</th>
              <!-- <th>直播时长</th> -->
              <th>开播时间</th>
              <th>预估销量</th>
              <th>预估销售额</th>
              <th>观看人数</th>
              <th>观看人数峰值</th>
              <!-- <th>操作</th> -->
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in response && response.lives" :key="'table01' + index">
              <td class="td td_01">
                <div>
                  <img :src="item.roomLogo" class="pointer" @click="go_to_page02(item.roomId)" />
                  <section>
                    <div>
                      <span
                        class="dot pointer"
                        @click="go_to_page02(item.roomId)"
                      >{{ item.roomTitle }}</span>
                      <p>
                        直播时长:{{
                        format_timehm((item.endTime - item.beginTime) * 1000)
                        }}
                      </p>
                      <img v-if="false" src="../../../assets/meng/pop01.png" />
                      <img v-if="false" src="../../../assets/meng/pop02.png" />
                    </div>
                  </section>
                </div>
              </td>
              <!-- <td class="td td_02">
                <div>{{format_time( (item.endTime-item.beginTime)*1000 )}}</div>
              </td>-->
              <td class="td td_02">
                <div>{{ timestamp(item.beginTime, "Y-M-D h:m") }}</div>
              </td>
              <td class="td td_03">
                <div>{{ format_num(item.livevolume) }}</div>
              </td>
              <td class="td td_04">
                <div>{{ format_num(item.livesales) }}</div>
              </td>
              <td class="td td_05">
                <div>{{ format_num(item.totalPeople) }}</div>
              </td>
              <td class="td td_06">
                <div>{{ format_num(item.peoplePeak) }}</div>
              </td>
              <!-- <td class="td td_07">
                <button @click="go_to_page02(item.roomId)">查看详情</button>
              </td>-->
            </tr>
          </tbody>
        </table>
        <div v-if="total <= 5" class="Popupline">我是有底线的~</div>
        <div class="pageBox" v-if="response && total > 5">
          <el-pagination
            background
            :page-size="5"
            layout="prev, pager, next ,jumper"
            :total="total"
            :current-page.sync="page02"
            :hide-on-single-page="false"
          ></el-pagination>
          <!-- :hide-on-single-page="true" -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import category_industry from '@/component/category_industry';
import category_goods from '@/component/category_goods';
import html2canvas from 'html2canvas';
import RankUpgrade from '@/component/rankUpgrade.vue';
import liveGoodsVue from '../../wang/live/liveDetails/liveGoods.vue';

export default {
  name: 'talent_01',
  components: { RankUpgrade, category_industry, category_goods },
  data() {
    return {
      categoryName: '全部', //筛选专用
      childIdsNames: [], //二三级分类字符串格式
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        parentName:'全部',
        childIds: []
      },
      screenshot: true, //正在截图
      permissions: 1,
      value03: '日榜',
      busy: false,
      loading: true,
      loading01: true,
      table_data01: [],

      cancel01: null,
      input01: '',
      //   弹窗
      dialog: false,
      page02: 1,
      time: '',
      response: null,
      total: 0,
      author_id: null,
      count: 0,
      page: 1,
      isFixed: false,
      offsetTop: 0,
      showLeft: true,
      order_by: "desc", //   表格头部排序
      sort: 1, //   表格头部排序
      CategoryId:0,   //达人行业id
      vipLevel: '',
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  computed: {
    listen_change() {
      const { industryItemObj } = this;
      return {
        industryItemObj,
      };
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //vip等级
    // this.get_data() 因为time_options组件内部已经提交新值，导致v-model的值更改，所以已经执行请求函数
    this.$watch(
      'listen_change',
      this.debounce((newValue, oldValue) => {
        this.page = 1;
        this.table_data01 = [];
        this.get_data();
      }, 0)
    );

    this.$watch('page02', (newValue, oldValue) => {
      this.get_data01();
    });
  },
  watch: {
    // 搜索为空时自动刷新榜单
    input01: function (newVal, oldVal) {
      if (newVal == '') {
        this.table_data01 = [];
        this.page = 1;
        this.get_data();
      }
    },
    value03(newValue) {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    checkedDatasJoe(newVal) {
      //获取对应id的对应字符串
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  methods: {
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = 'asc';
      } else {
        this.order_by = 'desc';
      }
      switch (parm02) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
        case 3:
          this.sort = 3;
          break;
        case 4:
          this.sort = 4;
          break;
        case 5:
          this.sort = 5;
          break;
      }
      this.get_data();
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    search_input() {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    get_data01() {
      let that = this;
      this.loading01 = true;
      that.dialog = true;
      this.$axios
        .post(
          '/api/live/PostLiveAuthorDetail',
          {
            CategoryId:this.CategoryId,
            AuthorId: that.author_id,
            Time: that.value03.split('?')[1],
            RankType:
              that.value03.split('?')[0] == '日榜'
                ? 1
                : that.value03.split('?')[0] == '周榜'
                ? 2
                : 3,
            Index: that.page02,
            Size: 5
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          if (response.data.code == 0) {
            this.response = response.data.data;
            this.loading01 = false;
            this.total = response.data.data.totalCount;
          } else {
            this.response = null;
            this.total = 0;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_data(cpage) {
      let that = this;
      if (cpage) {
        this.backTop();
        this.page = cpage;
      }
      this.loading = true;
      this.permissions = 1;
      this.busy = true;
      this.$axios
        .post(
          '/api/live/PostLiveAuthorRank',
          {
            CategoryId: this.industryItemObj.id,
            categoryNames: this.checkedDatasJoe.childNames,
            RankType:
              that.value03.split('?')[0] == '日榜'
                ? 1
                : that.value03.split('?')[0] == '周榜'
                ? 2
                : 3,
            Time: that.value03.split('?')[1],
            Keyword: this.trimStr(that.input01),
            ProCategoryName: this.checkedDatasJoe.parentName,
            Size: 30,
            Index: that.page,
            SortValue:
              this.value03.split('?')[1] == '2021-04-01-2021-04-30' ||
              this.value03.split('?')[1] == '2021-03-01-2021-03-31'
                ? 1
                : that.sort
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          this.loading = false;
          if (response.data.code1 == 1013||response.data.code == 1003||response.data.code ==1013) {
            this.permissions = 0;
            this.table_data01 = [];
          } else {
            this.permissions = 1;
          }
          if (response.data.code == 0) {
            this.time = response.data.data.timespan;
            this.table_data01 = response.data.data.ranks;

            this.count = response.data.data.totalCount;

            response.data.data.ranks.length < 30 ? (this.busy = true) : (this.busy = false);
          }
          this.setTBBar();
        })
        .catch(error => {
          console.log(error);
        });
    },
    generatorImage() {
      var that = this;
      this.screenshot = false;
      this.$nextTick(() => {
        const loading = this.$loading({
          lock: true,
          text: '导出中...',
          spinner: 'el-icon-loading',
          customClass: 'customClass'
        });
        var shareContent;
        shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement('canvas'); //创建一个canvas节点
        //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
        var scale = 1;
        canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale * scale; //定义canvas高度 *缩放
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
        var opts = {
          dpi: window.devicePixelRatio,
          scale: scale, // 添加的scale 参数
          useCORS: true,
          canvas: canvas, //自定义 canvas
          logging: true //日志开关
        };
        html2canvas(shareContent, opts).then(canvas => {
          let str;
          str = `《直播达人榜-${that.value03.split('?')[1]}》.png`;
          canvas.toBlob(
            function (blob) {
              const eleLink = document.createElement('a');
              eleLink.download = str;
              eleLink.style.display = 'none';
              // 字符内容转变成blob地址
              eleLink.href = URL.createObjectURL(blob);
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
            },
            'image/png',
            1
          );
          loading.close();
          that.screenshot = true;
        });
      });
    },
    export_data() {
      let that = this;
      let str = `排名,达人,粉丝数,预估销量,预估销售额,场均观看人数,观看人数峰值,带货品类,直播场次\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${that.table_data01[i].rank},\"${that.table_data01[i].nickName.replace(
          /"/g,
          '""'
        )}\",${that.format_num(that.table_data01[i].totalFans)}\t,${that.format_num(
          that.table_data01[i].forecastVolume
        )},${that.format_num(that.table_data01[i].forecastSaleroom)},${that.format_num(
          that.table_data01[i].watchCountAvg
        )},${that.format_num(that.table_data01[i].peoplePeak)},${
          that.table_data01[i].proCategories
        },${that.format_num(that.table_data01[i].liveCount)}\n`;
      }
      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = `《直播达人榜-${that.value03.split('?')[1]}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    loadMore: function () {
      if (this.page == 31) {
        return false;
      }
      this.get_data();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 300 ? true : false;
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight);
  }
};
</script>
<style scoped lang="less">
.data_time {
  margin-top: -60px;
  margin-bottom: 32px;
  margin-right: 0px;
  text-align: right;
  > span:first-child {
    font-size: 14px;
    color: #888888;
    letter-spacing: 0;
  }
  > span:last-child {
    color: #1779ff;
    letter-spacing: 0;
  }
}
.dialog {
  .page {
    padding-top: 30px;
    text-align: right;
    > p {
      font-size: 14px;
      color: #b5b5b5;
      text-align: center;
    }
    > div {
      margin-right: -10px;
    }
  }
  .table02 {
    thead {
      tr {
        > th:nth-child(1) {
          text-align: left;
          padding-left: 30px;
        }
      }
    }
    width: 100%;
    tbody {
      tr {
        height: 78px;
      }
      td {
        div {
          // font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222;
        }
      }
    }
    .td_07 {
      text-align: center;
      button {
        width: 88px;
        height: 32px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #ffffff;
        text-align: center;
      }
      button:hover {
        background-color: #ff924b;
      }
    }

    .td_02,
    .td_05,
    .td_06,
    .td_03,
    .td_04 {
      font-family: DINAlternate-Bold;
      font-size: 15px;
      text-align: center;
      color: 222;
    }

    .td_01 {
      width: 240px;
      > div {
        section {
          width: 160px;
          > div:first-child {
            // display: flex;
            // align-items: center;
            > span {
              display: block;
              // max-width: 100%;
              width: 150px;
              // word-break: break-all;
              font-size: 14px;
              color: #222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              // display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            img {
              height: 16px;
              margin-left: 6px;
            }
            p {
              font-size: 14px;
              color: #888;
              padding-top: 5px;
              text-align: left;
            }
          }
          > div:last-child {
            width: 100%;
            word-break: break-all;
            font-size: 14px;
            color: #555555;
          }
        }
        > img {
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 12px;
          border: 1px solid #e5e5e5;
        }
      }
    }

    .td {
      > div {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .count {
    margin-top: 14px;
    margin-bottom: 14px;
    color: #888888;
    font-size: 14px;
    span {
      color: #fd7f2c;
    }
  }
  .header {
    > div:first-child {
      position: relative;
      > div {
        position: absolute;
        bottom: -8px;
        left: -3px;
        width: 64px;
        height: 22px;
        background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
          linear-gradient(#ffffff, #ffffff);
        background-blend-mode: normal, normal;
        border-radius: 4px;
        font-size: 12px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      > img {
        width: 57px;
        height: 57px;
        box-sizing: border-box;
        margin-right: 15px;
        border-radius: 50%;
        // border: 2px solid #ff295d;
      }
    }
    > div:last-child {
      flex: 1;
      height: 57px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      > p:nth-child(1) {
        font-size: 15px;
        font-weight: 600;
        color: #222222;
        > img {
          width: 16px;
          margin-left: 4px;
          vertical-align: -2px;
        }
      }
      > p:nth-child(2) {
        width: 300px;
        font-size: 14px;
        color: #555555;
        margin-top: 4px;
      }
    }

    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
}
.table01 {
  thead {
    tr {
      > th:nth-child(2) {
        text-align: left;
      }
    }
    img {
      width: 5px;
      height: 10px;
      vertical-align: 0;
    }
  }
  tbody {
    tr {
      height: 78px;
    }
  }
  .td_08 {
    width: 10%;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      .span01 {
        font-size: 14px;
        color: #222222;

        display: block;
        line-height: 30px;
        margin-top: 3px;
      }
      .span02 {
        font-size: 14px;
        color: #fd7f2c !important;
        margin-left: 4px;
        line-height: 30px;
        cursor: pointer;
      }
      .span03 {
        line-height: 30px;
        display: block;
        margin-top: -1px;
        margin-left: 4px;
        color: #e5e5e5;
      }
    }
  }
  .td_07 {
    width: 14%;
    font-size: 14px;
    color: #222222;
    .div_dot {
      height: auto !important;
      -webkit-line-clamp: 3;

      -webkit-box-orient: vertical;
      overflow: hidden !important;
    }
  }
  .td_01,
  .td_06,
  .td_03,
  .td_05,
  .td_04 {
    font-family: DINAlternate-Bold;
    font-size: 15px;
    text-align: center;
  }
  .td_04 {
  }
  .td_02 {
    width: 300px;

    > div {
      section {
        width: 210px;
        > div:first-child {
          display: flex;
          align-items: center;
          > span {
            max-width: 100%;
            width: auto;
            word-break: break-all;
            font-size: 14px;
            font-weight: 600;
            color: #222222;
            margin-bottom: 5px;
          }
          > span:hover {
            color: #1779ff;
          }
          .img01 {
            margin-right: 6px;
            margin-left: 0;
            margin-top: -5px;
          }
          img {
            margin-top: -3px;
            width: 14px;
            height: 14px;
            margin-left: 6px;
          }
        }
        > div:last-child {
          width: 100%;
          word-break: break-all;
          font-size: 14px;
          color: #888;
        }
      }
      > img {
        border-radius: 50%;
        width: 50px;
        margin-right: 12px;
        border: 1px solid #e5e5e5;
      }
    }
  }

  .td_01 {
    width: 6.2%;
  }
  .td {
    > div {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.type {
  margin-bottom: 14px;
  > div {
    display: inline-block;
  }
  .input_group {
    display: inline-block;
    margin-left: 11px;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      vertical-align: -1px;
      background-color: #fff;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      border: none;
      color: #222;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    > div:hover {
      background: url('../../../assets/wang/talentCompare/search.png') no-repeat 12px 7px, #fff;
      background-size: 15px 15px;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0px;
      text-align: center;
      width: 38px;
      height: 30px;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 12px 7px,
        #fff;
      background-size: 15px 15px;
      img {
        width: 15px;
      }
    }
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
#talent_01 {
  padding-bottom: 1px;
  min-height: 100vh;
  padding-top: 5px;
  .paginationBox {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;

    .el-pagination {
      float: right;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }

  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: -1px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
.dot:hover {
  color: #ff924b !important;
}
// 弹窗底线~
.Popupline {
  font-size: 14px;
  color: #888;
  text-align: center;
  height: 40px;
  line-height: 40px;
  padding-top: 30px;
}
</style>
